<template>
  <div>
    <dtDialog
      :title="'分类管理'"
      :visible.sync="dialogVisible"
      :is-loading="loading"
      :footerSlot="true"
      @closeDialog="resetTemp()"
      @comfirmBtn="onSubmit()"
    >
      <authTable
        ref="authTable"
        v-loading="loading"
        :table-opts="tableOpts"
        :is-show-column="true"
        :is-column-search="false"
        :pagination-data="{
          total: total,
          queryParams: queryParams
        }"
        @pagination="getList"
        @searchReset="handleReset"
        @searchChange="handleQuery"
      >
        <template #toolbarBtn>
          <el-input
            v-model.trim="queryParams.typeName"
            placeholder="请输入分类名称"
            style="width:280px"
            maxlength="30"
            size="small"
            clearable
            @keyup.enter.native="handleQuery"
            @clear="handleReset"
          />
          <div class="btnGroup">
            <el-button size="small" type="primary" @click="handleAdd">新建分类</el-button>
          </div>
        </template>
      </authTable>
    </dtDialog>
    <classify-Dialog ref="classifyDialogRef" />
  </div>
</template>
<script>
import classifyDialog from './components/classifyDialog.vue'
import appTypeApi from '@/framework/api/developerCenter/application-center/applicationClassify'

export default {
  components: {
    classifyDialog
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        typeName: ''
      },
      total: 0,
      rowKey: 'id',
      tableOpts: {
        tableData: [],
        firstTableCol: {
          select: false
        },
        indexTableCol: {
          label: '序号',
          width: 70
        },
        tableCol: [
          {
            prop: 'typeName',
            label: '分类名称',
            show: true
          },
          {
            prop: 'typeCode',
            label: '分类编码',
            show: true
          },
          {
            prop: 'createUserName',
            label: '创建人',
            show: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            show: true
          }
        ],
        operator: {
          width: 146,
          fixed: 'right',
          operatorBtn: [
            { text: '修改', click: (row, col, cellValue) => { return this.handleUpdate(row) } },
            { text: '删除', type: 'danger', click: (row, col, cellValue) => { return this.handleDelete(row) } }
          ]
        }
      }
    }
  },
  watch: {
    'queryParams.typeName': function (newVal, oldVal) {
      this.getList()
    }
  },
  methods: {
    // 关闭弹窗
    resetTemp() {
      this.handleReset()
      this.dialogVisible = false
    },
    openDialog() {
      this.dialogVisible = true
      this.getList()
    },
    getList() {
      this.loading = true
      appTypeApi.getPage(this.queryParams).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery(formModel) {
      this.queryParams = { ...this.queryParams, ...formModel }
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.queryParams = {
        typeName: '',
        pageNo: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    handleAdd() {
      this.$refs.classifyDialogRef.classifyopen('create')
    },
    handleUpdate(row) {
      this.$refs.classifyDialogRef.classifyopen('update', row)
    },
    handleDelete(row) {
      this.$dtModal.confirm(`是否确认删除分类名称为"${row.typeName}"的数据项？`).then(() => {
        return appTypeApi.deleteType({ id: row.id, flag: 1 })
      }).then(() => {
        this.getList()
        this.$dtModal.msgSuccess('删除成功')
      }).catch(() => {})
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .table-container .table-opt-container {
    display: flex !important;
}
</style>

